{{page-title 'Settings'}}

<PageHeader @title="Account Settings" />

<SettingsPage>
  <div local-class='me-profile'>
    <h2>Profile Information</h2>

    <div local-class='info'>
      <UserLink @user={{this.model.user}}> <UserAvatar @user={{this.model.user}} @size="medium" /> </UserLink>

      <dl>
        <dt>Name</dt>
        <dd>{{ this.model.user.name }}</dd>
        <dt>GitHub Account</dt>
        <dd>{{ this.model.user.login }}</dd>
      </dl>
    </div>

    <p>
        To update your name and GitHub account, change them in your GitHub profile, then sign out and login again to
        crates.io.
        You cannot change these settings directly on crates.io, but we accept whatever values come from GitHub.
    </p>
  </div>

  <div local-class="me-email">
    <h2>User Email</h2>
    <EmailInput
      @user={{this.model.user}}
      data-test-email-input
    />
  </div>

  <div local-class="notifications" data-test-notifications>
    <h2>Notification Settings</h2>

    <label local-class="checkbox-input">
      <Input
        @type="checkbox"
        @checked={{this.publishNotifications}}
        disabled={{this.updateNotificationSettings.isRunning}}
        {{on "change" this.handleNotificationsChange}}
      />
      <span local-class="label">Publish Notifications</span>
      <span local-class="note">
        Publish notifications are sent to your email address whenever new
        versions of a crate that you own are published. These can be useful to
        quickly detect compromised accounts or API tokens.
      </span>
    </label>

    <div local-class="buttons">
      <button
        type="button"
        local-class="update-prefs-button"
        disabled={{this.updateNotificationSettings.isRunning}}
        {{on "click" (perform this.updateNotificationSettings)}}
      >
        Update preferences
      </button>
      {{#if this.updateNotificationSettings.isRunning}}
        <LoadingSpinner local-class="spinner" data-test-spinner />
      {{/if}}
    </div>
  </div>
</SettingsPage>